<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NCRE2</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <meta name="viewport" content="width=device-width" />
    <style>
        .page-top{
            width:100%;
            background-color: #04548c;
        }
        .user-icon{
            width:50px;
            height:50px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
        }
        .user-icon .iconfont{
            color:#969896;
            font-size:42px;
        }
        .user-favourate{
            width:40px;
            height:40px;
            display: flex;
            justify-content: center;
        }
        .user-favourate .iconfont{
            font-size: 32px;
            color:#fff;
        }
        .user-info{
            display: flex;
            padding:5px 10px;
            width:calc(100% - 20px);
            justify-content: space-between;
            align-items: center;
        }
        .user-text{
            flex: 1;
            margin-left:10px;
            color:#fff;
        }
        .user-name{
            font-size: 100%;
        }
        .user-slogan{
            font-size: 80%;
            color:#ddd;
        }
        .tips-text{
            width:calc(100% - 20px);
            padding:5px 10px;
            display: flex;
            align-items: center;
            margin-top:10px;
        }
        .tips-text .text{
            color:#ddd;
            font-size:80%;
            flex:1;
            text-align: center;
        }
        .tips-text .iconfont{
            color:#fff;
            height:40px;
            width:40px;
            font-size:24px;
            text-align: center;
            line-height: 40px;
        }

        .user-data{
            width:calc(100% - 20px);
            padding:15px 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .user-data .data-item{
            text-align: center;
            color:#fff;
            font-size: 90%;
        }
        .user-data .split-line{
            height:20px;
            border-left:1px solid rgba(240,240,240,0.2);
        }
        .data-item .data-value{
            font-size:150%;
        }
        .nav-list{
            width:90%;
            height:90px;
            border-radius: 4px;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
            margin:10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .nav-list .nav-item{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .nav-item .nav-icon{
            margin-bottom: 4px;
            color:#04548c;
        }
        .nav-item .nav-icon .iconfont{
            font-size:36px;
        }
        .nav-split{
            height: 40px;
            border-left: 1px solid rgba(140,140,140,0.3);
        }
        .page-button{
            width:calc(90% - 10px);
            padding: 10px 5px;
            border-radius: 4px;
            box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            margin:10px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .page-button .label{
            display: flex;
            align-items: center;
        }
        .page-button .label .iconfont{
            font-size:30px;
        }
        .page-button .link{
            color:#04548c;
        }
        .questions{
            border-radius: 4px 4px 0px 0px;
            margin-bottom:0;
        }
        .color-bar{
            background-color:#04548c;
            color:#fff;
            width:90%;
            margin:0 auto;
            height:14px;
            border-radius: 0px 0px 4px 4px;
            box-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .color-bar .iconfont{
            font-size: 10px;
        }
        .question-list{
            width:90%;
            margin:20px auto;
            display: flex;
            flex-direction: column;
        }
        .question-group{
            margin-bottom:10px;
            width:100%;
        }
        .question-group .group-title{
            width:calc(100% - 40px);
            background-color: rgba(242,242,242,1);
            padding:0 20px;
            height:60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 30px;
        }

        .opened .group-title{
            background-color: #fff;
        }
        .opened.question-group{
            border:1px solid rgba(99,99,99,0.1);
            border-radius: 30px;
        }
        .closed .group-list{
            visibility: hidden;
            height:0;
        }
        .opened .group-list{
            visibility:visible;
            height:auto;
        }
        .group-list{
            margin-top:10px;
            display: flex;
            flex-direction: column;
        }
        .group-list .list-item{
            display: flex;
            justify-content: space-between;
            /*align-items: center;*/
            padding: 5px 20px;
        }
        .group-list .list-item .icon{
            font-size:32px;
            color:#999;
        }
        .group-list .list-item .action{
            font-size:24px;
            color: #04548c;
        }
        .group-list .list-item .que-item{
            flex:1;
        }
        .group-list .list-item .que-item .que-title{
            color:#000;
        }
        .group-list .list-item .que-item .que-data{
            color:#999;
            font-size:80%;
        }

        /*定义列表显示和隐藏的动画*/
        .questions-list-animate{
            /*元素高度 延迟0.5秒进行动画*/
            transition: height 0.5s ease-in-out;
            overflow: hidden;
        }
        /*显示时高度指定到一个适合全部内容展示的高度*/
        .animate-show{
            height:5500px;
        }
        /*隐藏时设置高度为0*/
        .animate-hide{
            height:0;
        }
    </style>
</head>
<body>
  <div class="page-top">
      <div class="user-info">
          <div class="user-icon">
              <div class="iconfont icon-touxiang"></div>
          </div>
          <div class="user-text">
              <div class="user-name" id="user-name">显示注册姓名</div>
              <div class="user-slogan">二级下次一定要过</div>
          </div>
          <div class="user-favourate">
              <div class="iconfont icon-shoucangjia1"></div>
          </div>
      </div>
      <div class="tips-text">
          <div class="text">
              <div class="line" id="next-date">距离下一次考试还有204天10小时29分钟</div>
              <div class="line">（倒计时仅供参考，以实际考试时间为准）</div>
          </div>
          <div class="iconfont icon-fenxiangfangshi"></div>
      </div>

      <div class="user-data">
          <div class="data-item">
              <div class="data-box">
                  <span class="data-value" id="today-total">0</span>
                  <span class="data-text">题</span>
              </div>
              <div class="data-label">
                  <span class="iconfont icon-chartcolumn"></span>
                  <span class="data-text">练习日报</span>
              </div>
          </div>
          <div class="split-line"></div>
          <div class="data-item">
              <div class="data-box">
                  <span class="data-value" id="today-correct">5</span>
                  <span class="data-text">%</span>
              </div>
              <div class="data-label">
                  <span class="iconfont icon-jiangpai"></span>
                  <span class="data-text">今日排位</span>
              </div>
          </div>
          <div class="split-line"></div>
          <div class="data-item">
              <div class="data-box">
                  <span class="data-value" id="user-days">46</span>
                  <span class="data-text">天</span>
              </div>
              <div class="data-label">
                  <span class="iconfont icon-rili"></span>
                  <span class="data-text">练习日历</span>
              </div>
          </div>
      </div>
  </div>
  <div class="page-middle">
      <div class="nav-list">
          <div class="nav-item" id="choose-button">
              <div class="nav-icon">
                  <i class="iconfont icon-xuanzeyixuan"></i>
              </div>
              <div class="nav-label">选择题</div>
          </div>
          <div class="nav-split"></div>
          <div class="nav-item">
              <div class="nav-icon">
                  <i class="iconfont icon-zhongduan"></i>
              </div>
              <div class="nav-label">操作题</div>
          </div>
          <div class="nav-split"></div>
          <div class="nav-item">
              <div class="nav-icon">
                  <i class="iconfont icon-cuoti"></i>
              </div>
              <div class="nav-label">错题簿</div>
          </div>
      </div>
      <div class="page-button">
          <div class="label">
              <i class="iconfont icon-shuben"></i>
              <div>TOP20</div>
          </div>
          <div class="link" id="wrong-practice">挑战易错题</div>
      </div>

      <div class="page-button questions">
          <div class="label">
              <div>二级Java(1670/2272)</div>
          </div>
          <div class="link">查看题库</div>
      </div>
      <div class="color-bar">
          <i class="iconfont icon-xiangshang"></i>
      </div>
  </div>
  <div class="question-list questions-list-animate" id="questions">
      <div class="question-group closed">
          <div class="group-title">
              <div class="group-label">40%-计算机系统(5/159)</div>
              <i class="iconfont icon-xiangxiazhankai"></i>
          </div>
      </div>
      <div class="question-group closed">
          <div class="group-title">
              <div class="group-label">79.47%-数据结构与算法(359/485)</div>
              <i class="iconfont icon-xiangxiazhankai"></i>
          </div>
      </div>
      <div class="question-group opened">
          <div class="group-title">
              <div class="group-label">85.71%-程序设计基础(66/83)</div>
              <i class="iconfont icon-xiangxiazhankai"></i>
          </div>
          <div class="group-list">
              <div class="list-item">
                  <i class="icon iconfont icon-shuben"></i>
                  <div class="que-item">
                      <div class="que-title">7.2文件</div>
                      <div class="que-data">已练32题|共40题|正确率82.98%</div>
                  </div>
                  <i class="action iconfont icon-bianjiwenjian"></i>
              </div>

              <div class="list-item">
                  <i class="icon iconfont icon-shuben"></i>
                  <div class="que-item">
                      <div class="que-title">7.2文件</div>
                      <div class="que-data">已练32题|共40题|正确率82.98%</div>
                  </div>
                  <i class="action iconfont icon-bianjiwenjian"></i>
              </div>

              <div class="list-item">
                  <i class="icon iconfont icon-shuben"></i>
                  <div class="que-item">
                      <div class="que-title">7.2文件</div>
                      <div class="que-data">已练32题|共40题|正确率82.98%</div>
                  </div>
                  <i class="action iconfont icon-bianjiwenjian"></i>
              </div>

              <div class="list-item">
                  <i class="icon iconfont icon-shuben"></i>
                  <div class="que-item">
                      <div class="que-title">7.2文件</div>
                      <div class="que-data">已练32题|共40题|正确率82.98%</div>
                  </div>
                  <i class="action iconfont icon-bianjiwenjian"></i>
              </div>

              <div class="list-item">
                  <i class="icon iconfont icon-shuben"></i>
                  <div class="que-item">
                      <div class="que-title">7.2文件</div>
                      <div class="que-data">已练32题|共40题|正确率82.98%</div>
                  </div>
                  <i class="action iconfont icon-bianjiwenjian"></i>
              </div>
          </div>
      </div>
  </div>
  <div class="page-bottom">

  </div>
</body>
<script>
    //数据层：定义下一次考试日期
    let nextExamDate=new Date()
    //定义账户信息变量
    let accountInfo=null
    /**
     * 用户数据面板数据对象
     * @type {{todayTotal: number, todayRank: number, userDays: number}}
     */
    let userData={
        todayTotal:0, //今日练习总量
        todayCorrect:0, //今日正确率
        userDays:0 //连续练习天数
    }

    //展示层：渲染下一次考试日期
    function renderNextDays(nextDate){
        //日期运算：计算nextDate和当前的时间间隔
        let targetDate=new Date(nextDate+"T00:00:00")
        let currentDate=new Date()
        let timeDiff=Math.abs(targetDate.getTime()-currentDate.getTime())

        let days=Math.floor(timeDiff / (1000*60*60*24))
        let hours=Math.floor((timeDiff % (1000*60*60*24))/(1000*60*60))
        let minutes=Math.floor((timeDiff % (1000*60*60))/(1000*60))
        //对dom进行操作，显示这个时间间隔
        let nextDateDom=document.querySelector("#next-date")
        if(nextDateDom!=null){
            nextDateDom.textContent="距离下一次考试还有"+days+"天"+hours+"小时"+minutes+"分钟"
        }
    }


    //数据层：请求下一次考试日期API
    function getNextExamDate(){
        apiRequest(
            "GET",
            "http://ncre2-server.nj-agile.com/api/exam-infos/next",
            null,
            (result)=>{
                nextExamDate=result
                renderNextDays(nextExamDate)
            },
            true
        )
    }

    //数据层：方法2：获取账户信息
    function getAccountInfo(){
        apiRequest(
            "GET",
            "http://ncre2-server.nj-agile.com/api/account",
            null,
            (result)=>{
                if(result !=null){
                    accountInfo=result
                    console.log("获取到的账户信息是：",accountInfo)
                    //调用展示层方法
                    renderAccountInfo(accountInfo.login)
                }
            },
            true
        )
    }
    //展示层：方法2：将登录名显示在页面上
    function renderAccountInfo(loginName){
        let userNameDom=document.querySelector("#user-name")
        if(userNameDom!=null){
            userNameDom.textContent=loginName
        }
    }

    /**
     * 数据层：方法3：获取用户今日数据
     */
    function getUserTodayData(){
        apiRequest(
            "GET",
            "http://ncre2-server.nj-agile.com/api/vip-infos/today",
            null,
            (result)=>{
                //给数据变量赋值，调用渲染层方法
                console.log("今日练习数据：",result)
                if(result!=null && (result.totalCount || result.correctRate)){
                    userData.todayTotal=result.totalCount
                    userData.todayCorrect=result.correctRate
                }
                //调用渲染层方法
                renderUserData("total",userData.todayTotal)
                renderUserData("rate",userData.todayCorrect)
            },
            true
        )
    }

    /**
     * 数据层：方法4获取连续练习天数
     */
    function getUserDays(){
        apiRequest(
            "GET",
            "http://ncre2-server.nj-agile.com/api/vip-infos/days",
            null,
            (result)=>{
                if(result>0){
                    userData.userDays=result
                }
                renderUserData("days",userData.userDays)
            },
            true
        )
    }

    //数据层：定义章节列表
    let chapterList=[]
    //数据层：调用获取章节API
    function getChapterData(){
        apiRequest("GET","http://ncre2-server.nj-agile.com/api/que-chooses/typeitem",null,
            (result)=>{
                console.log("获取到章节数据:",result)
                //获取到数据赋值给章节列表变量
                chapterList=result
                //调用渲染dom方法，完成列表渲染
                renderChapter(chapterList)
            },
            true
        )
    }

    //数据层：定义大纲列表是否显示的变量
    let showChapterList=true

    /**
     * 展示层：显示/隐藏大纲列表
     * @param flag 是否显示
     */
    function collapseChapter(flag){
        //找到章节列表dom元素
        let cList=document.querySelector("#questions")
        if(cList!=null){
            //找到箭头dom元素
            let arrow=document.querySelector(".color-bar i")
            if(arrow!=null){
                if(flag){ //显示
                    arrow.classList.remove("icon-xiangxia")
                    arrow.classList.add("icon-xiangshang")
                    cList.classList.remove("animate-hide")
                    cList.classList.add("animate-show")
                }else{ //隐藏
                    arrow.classList.remove("icon-xiangshang")
                    arrow.classList.add("icon-xiangxia")
                    cList.classList.remove("animate-show")
                    cList.classList.add("animate-hide")
                }
            }
        }
    }

    /**
     * 展开指定的单元
     * @param unitDom 需要展开的单元dom
     */
    function collapseUnit(unitDom){
        //删除当前已经打开的单元opened样式
        let openedUnit=document.querySelector(".question-group.opened")
        if(openedUnit!=null){
            //替换展开、折叠样式
            openedUnit.classList.remove("opened")
            openedUnit.classList.add("closed")
            //替换图标
            let iconDom=openedUnit.querySelector(".group-title i")
            if(iconDom!=null){
                iconDom.classList.remove("icon-xiangshang1")
                iconDom.classList.add("icon-xiangxiazhankai")
            }
        }
        //为输入的dom增加opened样式
        unitDom.classList.remove("closed")
        unitDom.classList.add("opened")
        //替换图标
        let iconDom=unitDom.querySelector(".group-title i")
        if(iconDom!=null){
            iconDom.classList.remove("icon-xiangxiazhankai")
            iconDom.classList.add("icon-xiangshang1")
        }
    }

    /**
     * 绘制章节列表
     * @param chapterList 章节列表数据
     * 需绘制的dom结构如下：
     *      <div class="question-group closed">
     *           <div class="group-title">
     *               <div class="group-label">79.47%-数据结构与算法(359/485)</div>
     *               <i class="iconfont icon-xiangxiazhankai"></i>
     *           </div>
     *           <div class="group-list">
     *               <div class="list-item">
     *                   <i class="icon iconfont icon-shuben"></i>
     *                   <div class="que-item">
     *                       <div class="que-title">7.2文件</div>
     *                       <div class="que-data">已练32题|共40题|正确率82.98%</div>
     *                   </div>
     *                   <i class="action iconfont icon-bianjiwenjian"></i>
     *               </div>
     *           </div>
     *       </div>
     */
    function renderChapter(chapterList){
        //删除已有元素
        let existsDom=document.querySelectorAll("#questions .question-group")
        existsDom.forEach((exist)=>{exist.remove()})
        chapterList.forEach((chapter)=>{
            //<div class="question-group closed">
            let chapterDiv=document.createElement("div")
            chapterDiv.classList.add("question-group")
            chapterDiv.classList.add("closed")

            //<div class="group-title">
            let groupTitleDiv=document.createElement("div")
            groupTitleDiv.classList.add("group-title")

            //<div class="group-label">79.47%-数据结构与算法(359/485)</div>
            let groupLabelDiv=document.createElement("div")
            groupLabelDiv.classList.add("group-label")
            groupLabelDiv.textContent=chapter.correctRate+"%"+"-"+chapter.itemName+"("+chapter.practiceCount+"/"+chapter.queCount+")"

            //<i class="iconfont icon-xiangxiazhankai"></i>
            let groupIcon=document.createElement("i")
            groupIcon.classList.add("iconfont")
            groupIcon.classList.add("icon-xiangxiazhankai")

            //组合dom结构
            groupTitleDiv.appendChild(groupLabelDiv)
            groupTitleDiv.appendChild(groupIcon)

            //每个单元dom元素由展示层根据数据渲染创建，在创建dom时进行事件绑定
            groupTitleDiv.addEventListener("click",function(){
                collapseUnit(chapterDiv)
            })

            chapterDiv.appendChild(groupTitleDiv)
            //如果章节下存在子元素，绘制二级列表。
            if(chapter.children && chapter.children.length>0){
                let groupListDiv=document.createElement("div")
                groupListDiv.classList.add("group-list")
                let subList=chapter.children
                subList.forEach((subItem)=>{
                    let listItemDiv=document.createElement("div")
                    listItemDiv.classList.add("list-item")

                    let itemicon=document.createElement("i")
                    itemicon.classList.add("iconfont")
                    itemicon.classList.add("icon-shuben")
                    itemicon.classList.add("icon")

                    let queItemDiv=document.createElement("div")
                    queItemDiv.classList.add("que-item")

                    let queTitle=document.createElement("div")
                    queTitle.classList.add("que-title")
                    queTitle.textContent=subItem.itemName
                    queItemDiv.appendChild(queTitle)

                    let queData=document.createElement("div")
                    queData.classList.add("que-data")
                    queData.textContent="已练"+subItem.practiceCount+"题|共"+subItem.queCount+"题|正确率"+subItem.correctRate+"%"
                    queItemDiv.appendChild(queData)

                    let editIcon=document.createElement("i")
                    editIcon.classList.add("action")
                    editIcon.classList.add("iconfont")
                    editIcon.classList.add("icon-bianjiwenjian")

                    //按章节练习
                    editIcon.addEventListener("click",function(){
                        window.location.href="practice.html?type=section&keyword="+encodeURIComponent(subItem.itemName)
                    })

                    listItemDiv.appendChild(itemicon)
                    listItemDiv.appendChild(queItemDiv)
                    listItemDiv.appendChild(editIcon)
                    groupListDiv.appendChild(listItemDiv)
                })
                chapterDiv.appendChild(groupListDiv)
            }
            document.querySelector("#questions").appendChild(chapterDiv)
        })

    }

    /**
     * 展示层：方法3，渲染用户数据面板
     * @param type：total今日总量,rate今日正确率,days连续天数
     * @param value
     */
    function renderUserData(type,value){
        //处理总量
        if(type=="total"){
            let todayTotalDom=document.querySelector("#today-total")
            if(todayTotalDom!=null){
                todayTotalDom.textContent=value
            }
        }

        //处理正确率
        if(type=="rate"){
            let todayCorrectDom=document.querySelector("#today-correct")
            if(todayCorrectDom!=null){
                todayCorrectDom.textContent=value
            }
        }

        //处理连续天数
        if(type=="days"){
            let userDaysDom=document.querySelector("#user-days")
            if(userDaysDom!=null){
                userDaysDom.textContent=value
            }
        }
    }


    /**
     * HTTP请求方法简易封装
     * @param method 请求方式：GET/POST/PUT/DELETE
     * @param url 请求地址
     * @param data 发送的数据
     * @param callback function回调函数
     * @param isLogin 是否需要身份认证
     */
    function apiRequest(method,url,data,callback,isLogin){
        let request =  new XMLHttpRequest()
        request.onreadystatechange=function(){
            if(request.readyState==4){
                try{
                    let result=JSON.parse(request.responseText)
                    callback(result,request)
                }catch (e){
                    callback(request.responseText,request)
                }

            }
        }
        request.open(method,url)
        if(isLogin){
            let token=localStorage.getItem("token")
            request.setRequestHeader("Authorization","Bearer "+token)
        }
        request.send(data)
    }
    //交互层：监听页面加载方法
    window.onload=function(){
        getNextExamDate()
        getAccountInfo()
        getUserTodayData()
        getUserDays()
        //获取章节列表数据
        getChapterData()

        let chooseButton=document.querySelector("#choose-button")
        if(chooseButton!=null){
            chooseButton.addEventListener("click",function(){
                window.location.href="practice.html?type=all"
            })
        }
    }

    //查看题库的点击事件处理
    let showChatpterListButton=document.querySelector(".page-button.questions")
    if(showChatpterListButton!=null){
        showChatpterListButton.addEventListener("click",function(){
            showChapterList=!showChapterList
            collapseChapter(showChapterList)
        })
    }

    //绑定易错题链接
    let wrongButtonDom=document.querySelector("#wrong-practice")
    if(wrongButtonDom!=null){
        wrongButtonDom.addEventListener("click",function(){
            window.location.href="practice.html?type=wrong"
        })
    }

    //交互层:每分钟刷新下一次考试时间
    setInterval(()=>{
        renderNextDays(nextExamDate)
    },60000)
</script>
</html>